/*
# Variables
*/

@lato	 		: 'Lato', Arial, 'Microsoft JhengHei', '微軟正黑體',  '微软雅黑', 'Microsoft YaHei', '黑体', 'SimHei', 'Microsoft YaHei', 'FontAwesome', serif;
@raleway	 	: 'Raleway', Arial, 'Microsoft JhengHei', '微軟正黑體',  '微软雅黑', 'Microsoft YaHei', '黑体', 'SimHei', 'Microsoft YaHei', 'FontAwesome', serif;
@fonticon	 	: 'FontAwesome';

@text			: #4d4d4d;
@pink			: #ff585a;
@pink-dk		: #ff2f56;

@purple         : #560861;

@dark			: black;
@grey			: #808080;
@grey2			: #666666;
@light			: #fafafa;
@border			: #cbcbcb;


@xenyo	 		: #2299dd;
@blue			: @xenyo;
	
.border-box() {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
}
.content-box() {
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    -ms-box-sizing: content-box;
    box-sizing: content-box;
}
.border-radius(@r) {
    -webkit-border-radius: @r;
    -moz-border-radius: @r;
    -ms-border-radius: @r;
    border-radius: @r;
}
.box-shadow(@x, @y, @r, @color:black) {
    -webkit-box-shadow: @x @y @r @color;
    -moz-box-shadow: @x @y @r @color;
    -ms-box-shadow: @x @y @r @color;
    box-shadow: @x @y @r @color;
}
.transition(@duration:0.25s, @ease:ease-out, @style:all) {
    -webkit-transition: @style @duration @ease;
    -moz-transition: @style @duration @ease;
    -o-transition: @style @duration @ease;
    transition: @style @duration @ease;
}
.transition-delay(@sec) {
    -webkit-transition-delay: @sec;
    -moz-transition-delay: @sec;
    -ms-transition-delay: @sec;
    transition-delay: @sec;
}
.translate(@x, @y, @z) {
	-webkit-transform: translate3d(@x ,@y ,@z);
	-moz-transform: translate3d(@x ,@y ,@z);
	-ms-transform: translate3d(@x ,@y ,@z);
	transform: translate3d(@x ,@y ,@z);
}
.bg-color(@color, @alpha) {
    @rgba: hsla(hue(@color), saturation(@color), lightness(@color), @alpha);
    @argb: argb(@rgba);
    background-color: @color;
    background-color: @rgba;
	zoom: 1;
	background-color: ~"transparent \9";
    filter: ~"progid:DXImageTransform.Microsoft.gradient(startColorstr=@{argb}, endColorstr=@{argb})";
    -ms-filter: ~"progid:DXImageTransform.Microsoft.gradient(startColorstr=@{argb}, endColorstr=@{argb})";
}
.bg-gradient (@startColor: #eee, @endColor: white, @direction: top) {
	background-color: @startColor;
	background: -webkit-gradient(linear, @direction, from(@startColor), to(@endColor));
	background: -webkit-linear-gradient(@direction, @startColor, @endColor);
	background: -moz-linear-gradient(@direction, @startColor, @endColor);
	background: -ms-linear-gradient(@direction, @startColor, @endColor);
	background: -o-linear-gradient(@direction, @startColor, @endColor);
}
.clearfix() {
	zoom: 1;
	&:before { content: ''; display: block; }
	&:after { content: ''; display: table; clear: both; }
}
.valign() {
	text-align: center;
	
	&:after {
		content: "";
		display: inline-block;
		vertical-align: middle;
		width: 0;
		height: 100%;
		visibility: hidden;
	}
	& > * {
		display: inline-block;
		vertical-align: middle;
        float: none;
	}
}
.halign() {
    text-align: justify;
    
    &:after {
    	content: "";
        display: inline-block;
        width: 100%;
    }
    & > * {
        display: inline-block;
        vertical-align: middle;
        float: none;
    }
}
.opacity(@opacity: 0.5) {
	@opperc: @opacity * 100;
	-ms-filter: ~"progid:DXImageTransform.Microsoft.Alpha(Opacity=@{opperc})";
	filter: ~"progid:DXImageTransform.Microsoft.Alpha(Opacity=@{opperc})";
	-moz-opacity: @opacity;
	-khtml-opacity: @opacity;
	-webkit-opacity: @opacity;
	opacity: @opacity;
}
.scale(@ratio: 1.05){
	-webkit-transform: scale(@ratio);
	-moz-transform: scale(@ratio);
	-ms-transform: scale(@ratio);
	transform: scale(@ratio);
}
.placeholder(@color: @placeholderText) {
	&:-moz-placeholder {
		color: @color;
	}
	&:-ms-input-placeholder {
		color: @color;
	}
	&::-webkit-input-placeholder {
		color: @color;
	}
}